<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单展示页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <!-- 控制用户是否登录 -->
<!--    <script src="js/loginStatus.js"></script>-->
    <style>
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .table tr:first-child {
            background-color: #36bee9;
            font-weight: 600;
        }
        .tab-content {
            padding-top: 24px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
            </div>
            <p class="navbar-text navbar-right login-text">
                <a id="loginName" href="#"></a>
            </p>
            <p class="navbar-text navbar-right login-text">
                <a id="outLogin" href="/" onclick="outLogin()" >登出</a>
            </p>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-xs-8 col-xs-push-2">
                <ul class="nav nav-tabs" id="orderTabs">
                    <li class="active"><a id="0" href="#unpayOrders" >未支付订单</a></li>
                    <li><a id="1" href="#payedOrders">已支付订单</a></li>
                    <li><a id="2" href="#expiredOrders">已取消订单</a></li>
                </ul>
                <div class="tab-content" id="app">
                    <div id="unpayOrders" class="tab-pane active">
                        <table class="table" v-for="order in unpayedOrders">    <!--订单未支付数据源-->
                            <tr>
                                <td colspan="3">订单日期: {{order.ocreateTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号: {{order.ono}}</td>
                            </tr>
<!--                        <tr v-for="g in goods">-->
                            <tr v-for="orderField in order.orders"><!--v-for="o in order.orders"-->
                                <td style="max-width: 200px;">
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="javascript: void(0);">
                                                <img class="media-object" height="80px" width="62px" :src="orderField.ogoodImg">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">{{orderField.ogoodTitle}}</h4>
                                        </div>
                                    </div>
                                </td>
                                <td>￥{{orderField.ogoodPrice}}</td>
                                <td>{{orderField.onum}}</td>
                            </tr>
                            <tr style="text-align: right; color: red; font-weight: 800;"><!--v-if="orderField.length != 0"-->
                                <td colspan="5">
                                    总计：￥<span id="totalPrice1">{{order.totalPrice}}</span> <!--<button onclick="ensureOrder()" class="btn btn-danger">确认订单</button>-->
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <!-- onclick="cancelONoOrders()"-->
                                    <!--onclick="fa('${order.orderId}')"-->
                                    <!--class="cancelOrderTabs"-->
                                    <button type="button" class="btn btn-info" :value="order.ono" onclick="cancelONoOrders(this)"><!--:onclick="'cancelONoOrders('+order.ono+')'"-->
                                        取消订单
                                    </button>
                                </td>
                                <td>
                                    <button type="submit" class="btn btn-danger" style="margin-left: 80%" :value="order.ono" onclick="payONoOrders(this)" data-toggle="modal" data-target="#payModal">
                                        继续付款
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="payedOrders" class="tab-pane">
                        <table class="table" v-for="order in payedOrders">
                            <tr>
                                <td colspan="3">订单日期: {{order.ocreateTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号: {{order.ono}}</td>
                            </tr>
                            <!--                            <tr v-for="g in goods">-->
                            <tr v-for="orderField in order.orders">
                                <td style="max-width: 200px;">
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="javascript: void(0);">
                                                <img class="media-object" height="80px" width="62px" :src="orderField.ogoodImg">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">{{orderField.ogoodTitle}}</h4>
                                        </div>
                                    </div>
                                </td>
                                <td>￥{{orderField.ogoodPrice}}</td>
                                <td>{{orderField.onum}}</td>
                            </tr>
                            <tr style="text-align: right; color: red"><!--v-if="orderField.length != 0"-->
                                <td colspan="5">
                                    总计：￥{{order.totalPrice}} <!--<button onclick="ensureOrder()" class="btn btn-danger">确认订单</button>-->
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="expiredOrders" class="tab-pane">
                        <table class="table" v-for="order in expiredOrders">
                            <tr>
                                <td colspan="3">订单日期: {{order.ocreateTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号: {{order.ono}}</td>
                            </tr>
                            <!--                            <tr v-for="g in goods">-->
                            <tr v-for="orderField in order.orders">
                                <td style="max-width: 200px;">
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="javascript: void(0);">
                                                <img class="media-object" height="80px" width="62px" :src="orderField.ogoodImg">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">{{orderField.ogoodTitle}}</h4>
                                        </div>
                                    </div>
                                </td>
                                <td>￥{{orderField.ogoodPrice}}</td>
                                <td>{{orderField.onum}}</td>
                            </tr>
                            <tr style="text-align: right; color: red"><!--v-if="orderField.length != 0"-->
                                <td colspan="5">
                                    总计：￥{{order.totalPrice}} <!--<button onclick="ensureOrder()" class="btn btn-danger">确认订单</button>-->
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--模态框-->
    <div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="margin-top: 120px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button onclick="destoryPayModal()" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title">支付信息</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="orderONo">
                    <h4 style="font-weight: 800;"><span>应付金额: </span>￥<span style="color: red;" id="totalPrice2"></span></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger"  onclick="destoryPayModal()">取消支付</button><!--data-dismiss="modal"-->
                    <button type="button" onclick="confirmPay()" class="btn btn-success" >确认支付</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script>

    /*
     * vue渲染数据
     * */
    var vm = new Vue({
        el: '#app',
        data: {
            unpayedOrders:[], //未支付订单
            payedOrders: [], //已支付订单
            expiredOrders:[], //已取消订单
            //totalPrices: []
        }
    })

    getOrders(0);//默认获取状态为0的 未支付订单


    /*
     * 点击取消订单
     * */
    function cancelONoOrders(ono){
        //var oNo = document.getElementById("cancelOrderTabs").value;
        //var oNo = $(".cancelOrderTabs").val();
        //var oNo=$(ono);
        //let oNo = JSON.stringify(ono);
        //let oNo = ono.value();
        alert("是否确定取消该订单："+ono.value);
        $.ajax({
            url: 'cancelOrder',
            type: 'get',
            dataType: 'json',
            data: {oNo: ono.value},
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                if (data){
                    getOrders(0);
                    alert("取消成功")
                }else {
                    getOrders(0);
                    alert("取消失败")
                }
            }
        })

    }

    /*
     *  根据订单oNo号拿到价格和数量计算总价格一一赋值到对应的订单中显示
     */
    function payONoOrders(oNo){
        //let totalPrice1 = $('#totalPrice1').text();
        //$('#totalPrice2').text(totalPrice1);
        //alert("确定继续付款该订单："+oNo.value);
        $('#orderONo').val(oNo.value);
        $.ajax({
            url: 'continuePaySelectPrice',
            type: 'get',
            dataType: 'json',
            data: {oNo: oNo.value},
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                var totalPrice=0;
                for (var i = 0; i <data.length ; i++) {
                    var order=data[i];
                    var ogoodPrice = order.ogoodPrice;
                    var onum = order.onum;
                    var count = ogoodPrice * onum;
                    totalPrice+=count;
                }
                $('#totalPrice2').text(totalPrice);
            }
    })
    }


    /*
     * 点击确认支付
     * */
    function confirmPay(){
        var orderONo = $('#orderONo').val();
        var totalPrice = $('#totalPrice2').text();
        alert(orderONo+":"+totalPrice)
        window.location.href="front/aliPay?oNo="+orderONo+"&totalPrice="+totalPrice;
    }

    /*
     * 点击确取消支付
     * */
    function destoryPayModal(){
        window.location.href="showOrder";
    }

    var uName = "";
    var uId = 0;
    $(function () {

        /**
         * 获取后端session数据
         * uName：用户名
         * uId：用户ID
         */
        $.ajax({
            url: 'getLoginInfo',
            type: 'GET',
            dataType: 'JSON',
            success: function (data) {
                console.log(data)
                uName = data['uName'];
                uId = data['uId'];

                $('#loginName').text("欢迎您:"+uName)

            }
        })
    })

    /*登出：注销*/
    function outLogin() {
        $.ajax({
            url: '/front/outLogin',
            type: 'GET',
            dataType: 'TEXT',
            success: function (data) {

            }
        })
    }

    /**
     * 根据订单状态获取订单数据
     * **/
    function getOrders(status) {
        $.ajax({
            url: 'selectOStatusOrders',
            type: 'get',
            dataType: 'json',
            data: {oStatus: status},//, method: 'getOrderOfStatus'
            success: function(_data) {

                if('0'==status){    //未支付订单
                    vm.unpayedOrders = [];
                    //vm.totalPrices=[];
                    for(var i = 0;i < _data.length; i++) {
                        vm.unpayedOrders.push(_data[i]);
                    }
                }else if ('1' == status) {  //表示已支付订单
                    vm.payedOrders = [];
                    for(var i = 0;i < _data.length; i++) {
                        vm.payedOrders.push(_data[i]);
                    }
                    //alert("aaa");
                }else if ('2' == status) { //已取消支付订单
                    vm.expiredOrders = [];
                    for(var i = 0;i < _data.length; i++) {
                        vm.expiredOrders.push(_data[i]);
                    }
                    //alert("bbb");
                }
            }
        })
    }



    // 当用户点击导航的时候触发事件
    $('#orderTabs a').click(function() {
        // $(this).parent('.active'); //当前标签包含了 active 这个class的父标签
        if($(this).parent('.active').length == 0) { //如果找到的话，就表示当前标签处于未激活状态
            var status = $(this).prop('id');  //取到当前的tab的id, 与订单的状态是一致的
            getOrders(status);
            // alert(status);
            //console.log(status);
            $(this).tab('show');   // 让对应的tab展示
        }
    })


    /*function continuePayOrdersONo() {
        $('#payModal').modal('show');
    }*/


</script>
</html>